<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航条</title>
    <script src="../vue.js"></script>
    <style>
        * {
            margin: 0;
            pad: 0;
        }

        ul {
            list-style: none;
        }

        li {

            margin-top: 10px;
            margin-left: 150px;
            display: inline-block;
            text-align: center;
        }

        .c-nav {
            background-color: cadetblue;
            height: 42px;
        }

        .current{
            color:red
        }
    </style>
</head>

<body>
    <div id="app">
        <my-component>
            <template v-slot:header>
                <div class="c-nav">
                    <ul ref="nav">
                        <li v-for="item,key in list"  @mouseenter="current(key)" @mouseleave="cancel()" id="key">{{item}}</li>
                    </ul>
                </div>
            </template>
        </my-component>
    </div>


    <script>

        Vue.component('my-component', {
            render(createElement) {
                return createElement('div', [
                    createElement('header', this.$slots.header)
                ])
            }
        })
        var vm = new Vue({
            el: '#app',
            data:{
                list: ['首页新闻', '公司简介', '招聘信息', '活动策划', '师资力量','联系我们']
            },

            methods:{
                current(key){
                    vm.$refs.nav.getElementsByTagName('li')[key].className='current'
                },

                cancel(){
                    for (var i=0;i<vm.$refs.nav.getElementsByTagName('li').length;i++){
                        vm.$refs.nav.getElementsByTagName('li')[i].className=''
                    }
                }
             
            }

        })


    </script>
</body>


</html>